<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{file.my.share.title}"></title>
    <link th:href="@{/assets/css/page.css}" rel="stylesheet"/>
    <style>
        /* 表格容器样式 */
        .data-table-container {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin: 20px 0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        /* 表格头部样式 */
        .table-header {
            background: #f5f5f5;
            border-bottom: 1px solid #ddd;
            padding: 12px 15px;
            font-weight: bold;
            display: flex;
            align-items: center;
            color: #333;
        }

        .table-header .checkbox-wrapper {
            margin-right: 15px;
        }

        .table-header .column-header {
            flex: 1;
            text-align: center;
            padding: 0 5px;
            white-space: nowrap; /* 新增：防止表头文字折行 */
        }

        .table-header .column-header:first-child {
            text-align: left;
        }

        /* 表格内容区域 */
        .table-content {
            min-height: 380px; /* 调整：与其他页面保持一致 */
            position: relative;
            background: #fff;
        }

        /* 空数据消息 */
        .empty-table-message {
            text-align: center;
            padding: 50px 0;
            color: #999;
        }

        /* 操作按钮样式 - 与其他页面统一 */
        .operation-buttons {
            display: flex;
            gap: 5px;
            justify-content: center;
        }

        .operation-buttons .btn {
            display: inline-block;
            padding: 2px 6px;
            margin-bottom: 0;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 3px;
            text-decoration: none;
            color: #333;
            background-color: #fff;
            border-color: #ccc;
        }

        .operation-buttons .btn:hover {
            color: #333;
            background-color: #e6e6e6;
            border-color: #adadad;
        }

        /* 分页样式 */
        .pagination-center {
            text-align: center;
            padding: 10px 0;
        }

        .pagination-center button {
            padding: 2px 8px;
            font-size: 12px;
            margin: 0 2px;
        }
        /* 浏览对话框样式补充 */
        .file-content-container {
            max-height: 500px;
            overflow-y: auto;
        }

        .file-text-content {
            white-space: pre-wrap;
            word-wrap: break-word;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }

        .file-meta {
            margin-top: 15px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }

        .loading-indicator {
            padding: 20px;
        }
    </style>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        var currentPage = 1;
        var totalPages = 1;
        var pageSize = 20;
        var isLoading = false;

        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;
            _gridHeight = $(document).height()-65 -40;
        }

        $(function () {
            resizePageSize();
            initMyShareGrid();
            initPagination();
            initDialogs();
        });

        // 初始化我的分享列表
        function initMyShareGrid() {
            var _columnWidth = (_gridWidth - 300) / 4;

            $("#my-share-grid").flexigrid({
                width: _gridWidth,
                height: _gridHeight,
                url: /*[[@{/disk/file/queryMyShareList}]]*/'',  // 修正请求路径
                dataType: 'json',
                colModel: [
                    {display: /*[[#{file.name}]]*/'', name: 'fileName', width: _columnWidth, sortable: true, align: 'left'},
                    {display: /*[[#{share.link}]]*/'', name: 'shareLink', width: _columnWidth, sortable: true, align: 'center'},
                    {display: /*[[#{share.code}]]*/'', name: 'shareCode', width: _columnWidth, sortable: true, align: 'center'},
                    {display: /*[[#{share.time}]]*/'', name: 'shareTime', width: _columnWidth, sortable: true, align: 'center'},
                    {display: /*[[#{share.expire.time}]]*/'', name: 'expireTime', width: _columnWidth, sortable: true, align: 'center'},
                    {
                        display: /*[[#{share.status}]]*/'',
                        name: 'status',
                        width: _columnWidth,
                        sortable: true,
                        align: 'center',
                        process: function (v, _trid, _row) {
                            var statusText = v == 1 ? /*[[#{share.status.active}]]*/'' : /*[[#{share.status.inactive}]]*/'';
                            var statusClass = v == 1 ? 'status-active' : 'status-inactive';
                            return '<span class="' + statusClass + '">' + statusText + '</span>';
                        }
                    },
                    {
                        display: /*[[#{common.operation}]]*/'',
                        name: 'shareId',
                        width: 150,
                        sortable: false,
                        align: 'center',
                        process: function (v, _trid, _row) {
                            var html = '<div class="operation-buttons">';
                            if([[${#authorization.expression("hasRole('ROLE_cldk_file_share_copy')")}]]) {
                                html += '<a href="#" class="btn" onclick="copyShareLink(\'' + v + '\')" title=[[#{share.copy.link}]]><i class="glyphicon glyphicon-link"></i></a>';
                            }
                            if([[${#authorization.expression("hasRole('ROLE_cldk_file_share_edit')")}]]) {
                                html += '<a href="#" class="btn" onclick="editShare(\'' + v + '\')" title=[[#{common.modify}]]><i class="glyphicon glyphicon-pencil"></i></a>';
                            }
                            if([[${#authorization.expression("hasRole('ROLE_cldk_file_share_cancel')")}]]) {
                                html += '<a href="#" class="btn" onclick="cancelShare(\'' + v + '\')" title=[[#{share.cancel}]]><i class="glyphicon glyphicon-ban-circle"></i></a>';
                            }
                            if([[${#authorization.expression("hasRole('ROLE_cldk_file_share_delete')")}]]) {
                                html += '<a href="#" class="btn" onclick="deleteShare(\'' + v + '\')" title=[[#{common.delete}]]><i class="glyphicon glyphicon-trash"></i></a>';
                            }
                            html += '</div>';
                            return html;
                        }
                    }
                ],
                resizable: false,
                useRp: true,
                usepager: true,
                autoload: false,
                hideOnSubmit: true,
                showcheckbox: true,
                rowbinddata: true,
                onSuccess: function(data) {
                    updatePagination(data);
                    hideLoading();
                    if (data.rows && data.rows.length === 0) {
                        showEmptyMessage();
                    } else {
                        hideEmptyMessage();
                    }
                },
                onError: function() {
                    hideLoading();
                    showEmptyMessage();
                }
            });
            searchMyShares();
        }

        // 初始化分页控件
        function initPagination() {
            // 每页显示条数变化事件
            $("#page-size-select").change(function() {
                pageSize = parseInt($(this).val());
                currentPage = 1;
                searchMyShares();
            });

            // GO按钮点击事件
            $("#go-button").click(function() {
                var page = parseInt($("#current-page-input").val());
                if (page >= 1 && page <= totalPages) {
                    currentPage = page;
                    searchMyShares();
                }
            });

            // 分页按钮事件
            $("#first-page").click(function() {
                if (currentPage > 1) {
                    currentPage = 1;
                    searchMyShares();
                }
            });

            $("#prev-page").click(function() {
                if (currentPage > 1) {
                    currentPage--;
                    searchMyShares();
                }
            });

            $("#next-page").click(function() {
                if (currentPage < totalPages) {
                    currentPage++;
                    searchMyShares();
                }
            });

            $("#last-page").click(function() {
                if (currentPage < totalPages) {
                    currentPage = totalPages;
                    searchMyShares();
                }
            });
        }

        // 更新分页信息
        function updatePagination(data) {
            if (data && data.page) {
                currentPage = data.page;
                totalPages = data.total || 1;

                $("#current-page-input").val(currentPage);
                $("#total-pages").text(totalPages);

                // 更新按钮状态
                $("#first-page, #prev-page").prop('disabled', currentPage <= 1);
                $("#next-page, #last-page").prop('disabled', currentPage >= totalPages);
            }
        }

        // 显示加载状态
        function showLoading() {
            isLoading = true;
            $(".loading-message").show();
            $(".empty-table-message").hide();
        }

        // 隐藏加载状态
        function hideLoading() {
            isLoading = false;
            $(".loading-message").hide();
        }

        // 显示空数据消息
        function showEmptyMessage() {
            $(".empty-table-message").show();
        }

        // 隐藏空数据消息
        function hideEmptyMessage() {
            $(".empty-table-message").hide();
        }

        // 搜索我的分享
        function searchMyShares() {
            if (isLoading) return;

            showLoading();
            var fileName = $("#file-name-id").val();
            var startTime = $("#start-time-id").val();
            var endTime = $("#end-time-id").val();
            var status = $("#status-id").val();

            $("#my-share-grid").flexOptions({
                params: [
                    {name: 'fileName', value: fileName},
                    {name: 'startTime', value: startTime},
                    {name: 'endTime', value: endTime},
                    {name: 'status', value: status},
                    {name: 'page', value: currentPage},
                    {name: 'pageSize', value: pageSize}
                ]
            }).flexReload();
        }

        // 重置搜索条件
        function resetSearch() {
            $("#file-name-id").val('');
            $("#start-time-id").val('');
            $("#end-time-id").val('');
            $("#status-id").val('');
            currentPage = 1;
            searchMyShares();
        }

        // 全选/取消全选
        function toggleSelectAll() {
            var isChecked = $("#select-all-checkbox").prop('checked');
            $(".row-checkbox").prop('checked', isChecked);
        }

        // 复制分享链接
        function copyShareLink(shareId) {
            $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{/disk/file/getShareLink}]]*/'', // 修正请求路径
                data: [{name: "shareId", value: shareId}],
                success: function (data) {
                    if (data.success) {
                        $("#share-link-text").val(data.data.shareLink);
                        $("#share-code-text").val(data.data.shareCode);
                        $("#copy-link-dialog-id").dialog('open');
                    } else {
                        message(data.msg);
                    }
                },
                error: function (msg) {
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }

        // 编辑分享
        function editShare(shareId) {
            $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{/disk/file/queryShareById}]]*/'',
                data: [{name: "shareId", value: shareId}],
                success: function (data) {
                    if (data.success) {
                        var list = $("form#edit-share-form-id input.form-control");
                        list.each(function (index, item) {
                            var name = $(item).attr("name");
                            $(this).val(data.data[name]);
                        });
                        $("#edit-share-dialog-id").dialog('open');
                    } else {
                        message(data.msg);
                    }
                },
                error: function (msg) {
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }

        // 取消分享
        function cancelShare(shareId) {
            $("#cancel-share-dialog-id").attr('shareId', shareId);
            $("#cancel-share-dialog-id").dialog('open');
        }

        // 删除分享
        function deleteShare(shareId) {
            $("#delete-share-dialog-id").attr('shareId', shareId);
            $("#delete-share-dialog-id").dialog('open');
        }

        // 批量取消分享
        function batchCancelShare() {
            var ids = $("#my-share-grid").getFlexigridiAttrByIndex(0);
            if (ids.length === 0) {
                message(/*[[#{common.empty}]]*/'');
                return;
            }
            $("#batch-cancel-share-dialog-id").attr('shareIds', ids.join(','));
            $("#batch-cancel-share-dialog-id").dialog('open');
        }

        // 批量删除分享
        function batchDeleteShare() {
            var ids = $("#my-share-grid").getFlexigridiAttrByIndex(0);
            if (ids.length === 0) {
                message(/*[[#{common.empty}]]*/'');
                return;
            }
            $("#batch-delete-share-dialog-id").attr('shareIds', ids.join(','));
            $("#batch-delete-share-dialog-id").dialog('open');
        }

        // 复制到剪贴板
        function copyToClipboard(elementId) {
            var element = document.getElementById(elementId);
            element.select();
            document.execCommand('copy');
            message(/*[[#{share.copy.success}]]*/'');
        }

        // 初始化对话框
        function initDialogs() {
            // 编辑分享对话框
            $("#edit-share-dialog-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{share.edit.dialog.title}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var flag = $("form#edit-share-form-id input.form-control").checkDom();
                            if (!flag) {
                                return;
                            }
                            $("#edit-share-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            // 编辑分享表单异步提交
            $("#edit-share-form-id").ajaxForm({
                dataType: "json",
                url: /*[[@{/disk/file/updateShare}]]*/'', // 修正请求路径
                success: function(data) {
                    message(data.msg);
                    if (data.success) {
                        $("#edit-share-dialog-id").dialog('close');
                        searchMyShares();
                    }
                },
                error: function() {
                    message(/*[[#{common.error}]]*/'');
                }
            });

            // 复制链接对话框
            $("#copy-link-dialog-id").dialog({
                autoOpen: false,
                width: 400,
                modal: true,
                resizable: false,
                title: /*[[#{share.copy.link}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.close}]]*/'',
                        click: function() {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            // 取消分享对话框
            $("#cancel-share-dialog-id").dialog({
                autoOpen: false,
                width: 300,
                modal: true,
                resizable: false,
                title: /*[[#{share.cancel}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var shareId = $(this).attr('shareId');
                            $.post(/*[[@{/disk/file/cancelShare}]]*/'', {shareId: shareId}, function(data) { // 修正请求路径
                                message(data.msg);
                                if (data.success) {
                                    $("#cancel-share-dialog-id").dialog('close');
                                    searchMyShares();
                                }
                            });
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            // 删除分享对话框
            $("#delete-share-dialog-id").dialog({
                autoOpen: false,
                width: 300,
                modal: true,
                resizable: false,
                title: /*[[#{common.delete}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var shareId = $(this).attr('shareId');
                            $.post(/*[[@{/disk/file/deleteShare}]]*/'', {shareId: shareId}, function(data) { // 修正请求路径
                                message(data.msg);
                                if (data.success) {
                                    $("#delete-share-dialog-id").dialog('close');
                                    searchMyShares();
                                }
                            });
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
        }
    </script>
</head>
<body>

<header>
    <input id="file-name-id" th:placeholder="#{file.name.plc}">

    <input type="date" id="start-time-id" th:placeholder="#{share.time.start}">

    <input type="date" id="end-time-id" th:placeholder="#{share.time.end}">

    <select id="status-id">
        <option value="">全部状态</option>
        <option value="1" th:text="#{share.status.active}"></option>
        <option value="0" th:text="#{share.status.inactive}"></option>
    </select>

    <a href="#" class="btn-info btn" onclick="searchMyShares()">
        <i class="glyphicon glyphicon-search"></i>
        <span th:text="#{common.query}"></span>
    </a>

    <a href="#" class="btn-default btn" onclick="resetSearch()">
        <i class="glyphicon glyphicon-refresh"></i>
        <span th:text="#{common.reset}"></span>
    </a>

    <a href="#" class="btn-info btn" th:href="@{/disk/file/filePage}"> <!-- 修正返回链接 -->
        <i class="glyphicon glyphicon-folder-open"></i>
        <span th:text="#{file.return.list}"></span>
    </a>

    <a href="#" class="btn btn-info" onclick="browseSelectedFile()" >
        <i class="glyphicon glyphicon-folder-open"></i>
        <span th:text="#{file.browse}">浏览文件</span>
    </a>

</header>

<!-- 表格容器 -->
<div class="data-table-container">
    <!-- 表格头部 -->
    <div class="table-header">
        <div class="checkbox-wrapper">
            <input type="checkbox" id="select-all-checkbox" onclick="toggleSelectAll()">
        </div>
        <div class="column-header" th:text="#{file.name}">文件名</div>
        <div class="column-header" th:text="#{share.link}">分享链接</div>
        <div class="column-header" th:text="#{share.code}">分享代码</div>
        <div class="column-header" th:text="#{share.time}">分享时间</div>
        <div class="column-header" th:text="#{share.expire.time}">过期时间</div>
        <div class="column-header" th:text="#{share.status}">状态</div>
        <div class="column-header" th:text="#{common.operation}">操作</div>
        <div class="column-header" th:text="#{file.name}">文件名</div>
    </div>

    <!-- 表格内容区域 -->
    <div class="table-content">
        <!-- 数据表格 -->
        <table id="my-share-grid"></table>

        <!-- 空数据消息 -->
        <div class="empty-table-message">
            <i class="glyphicon glyphicon-inbox"></i>
            <p>暂无分享数据</p>
        </div>

        <!-- 加载状态 -->
        <div class="loading-message" style="display: none;">
            <div class="loading-icon"></div>
            <span>正在处理数据,请稍候...</span>
        </div>
    </div>

    <!-- 分页控件 -->
    <div class="pagination-container">
        <div class="pagination-left">
            <span>每页显示条数</span>
            <select id="page-size-select">
                <option value="10">10</option>
                <option value="20" selected>20</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        </div>

        <div class="pagination-center">
            <button id="first-page" title="第一页">K</button>
            <button id="prev-page" title="上一页"><<</button>
            <span>当前页</span>
            <input type="number" id="current-page-input" value="1" min="1">
            <span>总页数</span>
            <span id="total-pages">1</span>
            <button id="next-page" title="下一页">>></button>
            <button id="last-page" title="最后一页">K</button>
            <button id="go-button" class="go-button">GO</button>
        </div>

        <div class="pagination-right">
            <!-- 右侧可以添加其他信息 -->
        </div>
    </div>
</div>

<!-- 编辑分享对话框 -->
<div id="edit-share-dialog-id" sec:authorize="hasRole('ROLE_cldk_file_share_edit')" style="display: none;">
    <form id="edit-share-form-id" method="post">
        <div class="form-group">
            <span th:text="#{share.id}"></span>
            <input class="form-control" name="shareId" readonly>
        </div>
        <div class="form-group">
            <span th:text="#{share.description}"></span>
            <input class="form-control" name="description" pattern="^.+$">
        </div>
        <div class="form-group">
            <span th:text="#{share.expire.time}"></span>
            <input class="form-control" name="expireTime" type="datetime-local">
        </div>
    </form>
</div>

<!-- 复制链接对话框 -->
<div id="copy-link-dialog-id" style="display: none;">
    <div class="form-group">
        <span th:text="#{share.link}"></span>
        <input class="form-control" id="share-link-text" readonly>
        <button type="button" class="btn btn-default" onclick="copyToClipboard('share-link-text')" th:text="#{share.copy}"></button>
    </div>
    <div class="form-group">
        <span th:text="#{share.code}"></span>
        <input class="form-control" id="share-code-text" readonly>
        <button type="button" class="btn btn-default" onclick="copyToClipboard('share-code-text')" th:text="#{share.copy}"></button>
    </div>
</div>

<!-- 取消分享对话框 -->
<div id="cancel-share-dialog-id" sec:authorize="hasRole('ROLE_cldk_file_share_cancel')" style="display: none;">
    <p th:text="#{share.cancel.confirm}"></p>
</div>

<!-- 删除分享对话框 -->
<div id="delete-share-dialog-id" sec:authorize="hasRole('ROLE_cldk_file_share_delete')" style="display: none;">
    <p th:text="#{share.delete.confirm}"></p>
</div>

<!-- 批量取消分享对话框 -->
<div id="batch-cancel-share-dialog-id" sec:authorize="hasRole('ROLE_cldk_file_share_cancel')" style="display: none;">
    <p th:text="#{share.batch.cancel.confirm}"></p>
</div>

<!-- 批量删除分享对话框 -->
<div id="batch-delete-share-dialog-id" sec:authorize="hasRole('ROLE_cldk_file_share_delete')" style="display: none;">
    <p th:text="#{share.batch.delete.confirm}"></p>
</div>


<!-- 文本框弹窗 -->
<div id="fileContentDialog" style="display: none; padding: 20px;">
    <div class="form-group">
        <label>文件内容</label>
        <textarea id="fileContentText" class="form-control" style="height: 300px; width: 100%;" readonly></textarea>
    </div>
</div>
</body>
</html>